<template>
  <div class="app-container">
      我指导的学生
    <el-row type="flex" class="row-bg" justify="center" :gutter="20">
      <el-col :span="12">
      <el-input
      placeholder="请输入姓名"
      prefix-icon="el-icon-search" clearable v-model="param.searchName">
      </el-input>
      </el-col>
      <el-col :span="4">
    <el-button icon="el-icon-search" circle @click="selectMyStudent"></el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-button type="primary" @click="getStudentList">添加指导学生</el-button>
    <el-table :data="studentList" style="width: 100%;margin-top:30px;" border>
      <el-table-column align="center" label="学号" width="80">
        <template slot-scope="scope">
          {{ scope.row.studentAccount }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="姓名" width="220">
        <template slot-scope="scope">
          {{ scope.row.studentName }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="班级">
        <template slot-scope="scope">
          {{ scope.row.class }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="实训单位">
        <template slot-scope="scope">
          {{ scope.row.internshipName }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button v-if ="scope.row.internshipName!==undefined&&scope.row.internshipName!==''" type="primary" size="small" @click="detail(scope.row)">实训信息</el-button>
          <el-button v-if ="scope.row.internshipName!==undefined&&scope.row.internshipName!==''" type="primary" size="small" @click="handleAssignRole(scope)">报告信息</el-button>
          <el-popconfirm
          @onConfirm="noChoice(scope.row)"
            title="确定解除指导关系吗？" >
            <el-button  slot="reference" type="primary" size="small" >解除指导</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
      
    </el-table>
    </el-row>
    <!--分页组件-->
<el-pagination background layout="prev, pager, next"  prev-text="上一页"
        next-text="下一页"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currpage"
        :page-size="pageSize"
        :total="total"></el-pagination>
        <el-dialog title="待分配学生" :visible.sync="dialogTableVisible">
          <div v-if="noStudentList!==undefined&&noStudentList.length>0">
            <el-input
            placeholder="请输入姓名"
            prefix-icon="el-icon-search" clearable v-model="studentParams.studentName">
            </el-input>
            <el-button icon="el-icon-search" circle @click="getStudentList"></el-button>
            <el-table ref="multipleTable" :data="noStudentList">
              <el-table-column type="selection"  width="50"></el-table-column>
              <el-table-column property="studentAccount" label="学号" width="150"></el-table-column>
              <el-table-column property="studentName" label="姓名" width="50"></el-table-column>
              <el-table-column property="class" label="班级" width="150" ></el-table-column>
            </el-table>
              <!--分页组件-->
            <el-pagination background layout="prev, pager, next"  prev-text="上一页"
                    next-text="下一页"
                    @size-change="handleSizeChange2"
                    @current-change="handleCurrentChange2"
                    :current-page.sync="currpage2"
                    :page-size="pageSize2"
                    :total="total2">
              </el-pagination>
            <el-button type="primary" @click="dialogTableVisible = false">取消</el-button>
            <el-button type="primary" @click="choiceStudent">确定</el-button>
          </div>
          <div v-if="noStudentList===undefined||noStudentList.length<1">
            无可分配的学生哦！
          </div>
        </el-dialog>
        <el-dialog title="实训信息详情" :visible.sync="CompanyDisabled">
          <el-form :model="studentCompany">
            <el-form-item label="实训单位名称" :label-width="formLabelWidth">
              <el-input v-model="studentCompany.internshipName" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-row  :gutter="20">
              <el-col :span="10">
                <el-form-item label="实训单位类型" :label-width="formLabelWidth">
                  <el-select v-model="internshipType" placeholder="实训单位类型" :disabled="true">
                    <el-option label="校内培训" value="0"></el-option>
                    <el-option label="校外培训" value="1"></el-option>
                    <el-option label="校外实习" value="2"></el-option>
                  </el-select>
                </el-form-item>
               </el-col>
              <el-col :span="10">
                <el-form-item label="实训单位地址" :label-width="formLabelWidth">
                  <el-input v-model="studentCompany.internshipAddress" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
               </el-col>
            </el-row>
            <el-form-item label="实训描述" :label-width="formLabelWidth">
              <el-input type="textarea" v-model="studentCompany.content" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-row  :gutter="20">
              <el-col :span="10">
                <el-form-item label="实训导师姓名" :label-width="formLabelWidth">
                  <el-input v-model="studentCompany.tutor" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="实训导师手机号码" :label-width="formLabelWidth">
                  <el-input v-model="studentCompany.tutorPhone" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row  :gutter="20">
              <el-col :span="10">
                <el-form-item label="实习协议" :label-width="formLabelWidth">
                    <img v-if="studentCompany.contract" :src="studentCompany.contract" class="avatar">
                </el-form-item>
              </el-col>
              <el-col :span="10">
                 <el-form-item label="实习照片" :label-width="formLabelWidth">
                    <img v-if="studentCompany.photo" :src="studentCompany.photo" class="avatar">
                 </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="CompanyDisabled = false">取 消</el-button>
            <el-button @click="CompanyDisabled = false">确定</el-button>
          </div>
      </el-dialog>
  </div>
</template>

<script>
import {getMyStudent,choiceStudent,noChoice} from '@/api/tutor'
import {getStudentList} from '@/api/user'
import {getStudentCompany} from '@/api/binding'

export default {
  data() {
    return {
      studentList: [],
      param :{
      start: 0,
      limit: 10,
      searchName:''
      },
      pageSize: 10, //每一页的数据大小
      pageSize2: 10,
      currpage: 1, //当前页
      currpage2: 1,
      total:0,//总条数
      total2:0,
      dialogTableVisible:false,
      noStudentList:[],
      studentParams:{
        start: 0,
        limit: 10,
        studentName:''
      },
      choiceParams:{
        choices:[]
      },
      noChoiceParams:{
        studentAccount:''
      },
      CompanyDisabled:false,
      studentCompany:{},
    }
  },
  computed: {
    routesData() {
      return this.routes
    }
  },
  //页面打开时执行的方法
  created() {
    this.getMyStudent()
  },
  methods: { 
    async getMyStudent() {
      let res = await getMyStudent(this.param)
      this.studentList = res.beans
      this.total = res.bean.total
    },
    
    //页大小变化
     handleSizeChange(val) {
      this.pageSize = val;
      this.param.start = this.pageSize*(this.currpage-1)
      this.getUserList();
    },
    //页标号变化
    handleCurrentChange(val) {
      this.currpage = val;
      this.param.start = this.pageSize*(this.currpage-1)
      this.getUserList();
    },
        //页大小变化
     handleSizeChange2(val) {
      this.pageSize2 = val;
      this.studentParams.start = this.pageSize2*(this.currpage2-1)
      this.getUserList();
    },
    //页标号变化
    handleCurrentChange2(val) {
      this.currpage2 = val;
      this.studentParams.start = this.pageSize2*(this.currpage2-1)
      this.getUserList();
    },
    async selectMyStudent(){
      this.param.start = 0;
      this.param.limit = 10;
      this.currpage = 1;
      this.getMyStudent()
    },
    async getStudentList(){
      this.dialogTableVisible = true;
      let res = await getStudentList(this.studentParams)
      this.noStudentList = res.beans
      this.total2 = res.bean.total
    },
    async choiceStudent(){
       this.choiceParams.choices = this.$refs.multipleTable.selection;
      let res = await choiceStudent(this.choiceParams).then(()=>{
            this.$message({
              type: 'success',
              message: '分配成功!'
            })
            this.dialogTableVisible = false;
            this.getMyStudent()
            }
          ).catch(err=>{
            this.$message({
              type: 'success',
              message: '分配失败!'
            })
            })
    },
    async noChoice(row){
      console.log("11111")
       this.noChoiceParams.studentAccount = row.studentAccount
      let res = await noChoice(this.noChoiceParams).then(()=>{
            this.$message({
              type: 'success',
              message: '取消分配成功!'
            })
            this.getMyStudent()
            }
          ).catch(err=>{
            this.$message({
              type: 'success',
              message: '取消分配失败!'
            })
            })
    },
    async detail(row){
      this.CompanyDisabled = true
      let res = await getStudentCompany(row);
      this.studentCompany = res.bean
    },
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
.avatar {
    width: 200px;
    height: 150px;
    display: block;
  }
</style>
